<template>
    <div class="login">
        <div class="login-wrapper">
          <h3>用户登录</h3>
          <p class="elinput_username">
            <el-input placeholder="账号"  v-model="username"></el-input>
          </p>
          <p class="elinput_password">
            <el-input placeholder="密码"  v-model="password"></el-input>
          </p>
          <p class="elinput-button">
            <el-button style="width:320px;height:35px" type="primary" @click="login">登录</el-button>
          </p>    
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            username:"",
            password:""
        }
    },

    methods: {
        login(){
            //非空判断
            if(this.username.length===0||this.password.length===0){
                this.$message("内容不能为空");
                return;
            }

            this.$axios.get("https://www.liulongbin.top:8888/api/private/v1/login",{params:{
                username:this.username,
                password:this.password
            }
            })
            .then((res)=>{
                console.log(res)
                var token=res.data.data.token
                localStorage.setItem("token",token)
                // localStorage.token=res.data.data.token 
                this.$router.push({path:"/home"})
                this.username=""
                this.password=""
            })
            .catch((error)=>{
                console.log(error)
            })
    }
}}
</script>

<style scoped>
*{
    margin:0px;
    padding:0px;
}
.login{
    width:100%;
    height:100vh;
    /* background-color: aquamarine; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.login-wrapper{
    width:350px;
    height:320px;
    border:1px solid lightgray;
    border-radius:15px;
}
.login-wrapper h3{
    margin-top:27px;
    color:grey;
    text-align: center;
}
.elinput_username{
    width:90%;
    margin-left:5%;
    height:50px;
    /* background-color: lightgreen; */
    margin-top:20px;
}
.elinput_password{
    width:90%;
    margin-left:5%;
    height:50px;
    /* background-color: lightgreen; */
    margin-top:20px;
}
.elinput-button{
    width:90%;
    margin-left:5%;
    height:50px;
    /* background-color: lightgreen; */
    margin-top:20px;
}
</style>